<template>
  <div>
    <el-scrollbar class="table-wrap">
      <el-table v-loading="loading" @expand-change="handleExpandChange" :data="tableData" :tree-props="treeProps" :row-key="rowKey" :default-expand-all="defaultExpandAll" :height="height" :stripe="stripe" :border="border" :max-height="maxHeight" :header-cell-style="tabHeadStyle" :cell-style="tabcellStyle" :row-style="rowStyle" style="width: 100%" @selection-change="handleSelectionChange">
        <!-- 多选 -->
        <el-table-column v-if="isSelection" type="selection" align="center" :is-selection="selectable" />
        <!-- 索引 -->
        <el-table-column v-if="isIndex" :label="indexLabel" type="index" align="center" width="50" />
        <template v-for="(item, index) in tableCols">
          <!-- 合并单元格 -->
          <el-table-column v-if="item.type == 'expand'" type="expand" :key="index" :label="item.label" :width="item.width" :min-width="item['min-width']" :fixed="item.fixed" :align="item.align" :header-align="item['header-align'] || 'left'" :show-overflow-tooltip="item['show-overflow-tooltip'] || true">
            <template slot-scope="scope">
              <div class="nested-table-container">
                <el-table :data="scope.row.list" style="width: 100%">
                  <!-- 子表格的列 -->
                  <template v-for="(citem,index) in tableCols_subset">
                    <el-table-column v-if="citem.slot && !citem.type" :key="index" :label="citem.label" :prop="citem.prop" :width="citem.width" :min-width="citem['min-width']" :fixed="citem.fixed" :align="citem.align" :header-align="citem['header-align'] || 'left'" :show-overflow-tooltip="citem['show-overflow-tooltip'] || true">
                      <template v-if="citem.slot" slot-scope="scope" :name="citem.slot">
                        <slot :name="citem.slot" :row="scope.row" />
                      </template>
                    </el-table-column>
                    <!--不需要插槽-->
                    <el-table-column v-if="!citem.slot && !citem.type" :key="index" :label="citem.label" :prop="citem.prop" :width="citem.width" :min-width="citem['min-width']" :fixed="citem.fixed" :align="citem.align" :header-align="citem['header-align'] || 'left'" :show-overflow-tooltip="citem['show-overflow-tooltip'] || true" />
                  </template>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <!-- 需要插槽 -->
          <el-table-column v-if="item.slot && !item.type" :key="index" :label="item.label" :prop="item.prop" :width="item.width" :min-width="item['min-width']" :fixed="item.fixed" :align="item.align" :header-align="item['header-align'] || 'left'" :show-overflow-tooltip="item['show-overflow-tooltip'] || true">
            <template v-if="item.slot" slot-scope="scope" :name="item.slot">
              <slot :name="item.slot" :row="scope.row" />
            </template>
          </el-table-column>
          <!--不需要插槽-->
          <el-table-column v-if="!item.slot && !item.type" :key="index" :label="item.label" :prop="item.prop" :width="item.width" :min-width="item['min-width']" :fixed="item.fixed" :align="item.align" :header-align="item['header-align'] || 'left'" :show-overflow-tooltip="item['show-overflow-tooltip'] || true" />
        </template>
      </el-table>
    </el-scrollbar>
    <div v-if="pagInationIf" class="flex-bet page">
      <div>{{ leftText }}</div>
      <el-pagination :current-page="pagInation.pageNum" :total="pagInation.count" :page-size="pagInation.pageSize" layout="prev, pager, next,total" background @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'NxTable',
  props: {
    // 加载状态
    loading: { type: Boolean, default: false },
    // 表格列配置
    tableCols: { type: [Array], default: () => [] },
    tableCols_subset: { type: [Array], default: () => [] },
    // 表格内数据
    tableData: { type: [Array], default: () => [] },
    // 表格是否显示斑马线
    stripe: { type: [Boolean, String], default: false },
    // 表格边框
    border: { type: [Boolean, String], default: false },
    height: { type: [Number, String] },
    // 最大高度
    maxHeight: { type: [Number, String], default: null },
    // 是否显示表格复选框
    isSelection: { type: [Boolean], default: false },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: true },
    // 索引lable
    indexLabel: { type: String, default: '序号' },
    // 分页数据
    pagInation: {
      type: Object,
      default: () => ({ pageSize: 10, pageNo: 1, total: 0 })
    },
    pagInationIf: { type: [Boolean], default: true },
    leftText: { type: String, default: '' },
    treeProps: { type: Object },
    rowKey: { type: String, default: '' },
    defaultExpandAll: { type: [Boolean], default: false }
  },

  data() {
    return {
      // 表头样式
      tabHeadStyle: {
        'background-color': '#FAFAFA',
        color: '#333333',
        'font-weight': 'bold',
        'text-align': 'center'
      },
      // 行样式
      tabcellStyle: {
        color: '#666'
      },
      rowStyle: {
        height: '50px'
      }
    }
  },
  methods: {
    handleExpandChange(row) {
      console.log(row);
    },
    // 据条件禁用某个列表项的选择框
    selectable(row) {
      if (row.prohibit == null || row.prohibit == '') {
        return true
      } else {
        return false
      }
    },
    // 多选事件，保存选择项到指定参数
    handleSelectionChange(val) {
      this.$emit('checkbox-data', val)
    },
    // 翻页触发
    handleCurrentChange(val) {
      this.pagInation.pageNum = val
      this.$emit('refresh', this.pagInation)
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  height: 60px;
  margin-top: 20px;
}
</style>
